<template>
  <a-config-provider
    :locale="zhCN"
    :component-size="themeStore.appSize"
    :theme="{
      algorithm: themeStore.isDark ? theme.darkAlgorithm : '',
      token: {
        fontSize: themeStore.fontSize,
        borderRadius: 4,
        screenXXLMin: 1800,
        colorPrimary: themeStore.colorPrimary
      },
      components: {
        Popover: {
          sizePopupArrow: 0
        },
        Form: {
          marginLG: themeStore.formSize
        },
        Table: {
          fontWeightStrong: 400
        }
      }
    }"
  >
    <slot></slot>
  </a-config-provider>
</template>

<script setup>
import { onMounted } from 'vue'
import dayjs from 'dayjs'
import { theme } from 'ant-design-vue'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import { Card, Empty, RangePicker } from 'ant-design-vue'
import useThemeStore from '@/store/theme'
import 'dayjs/locale/zh-cn'

dayjs.locale('zh-cn')
const themeStore = useThemeStore()
const { useToken } = theme
onMounted(() => {
  const { token } = useToken()
  themeStore.setVarColor(token.value)
  // Input.props.allowClear.default = true

  themeStore.fontSize = window.screen.width < 1600 ? 12 : 14
  Card.props.bordered.default = false
  Card.props.size.default = 'small'
  RangePicker.props.allowClear.default = false
  Empty.props.image.default = Empty.PRESENTED_IMAGE_SIMPLE
})
</script>

<style></style>
